import React, { Component } from 'react';
class List extends Component {
  constructor(props) {
    super(props);
  }
  state = {

  }

  // 单删
  del =(index)=>{
    this.props.list.splice(index,1)
    this.setState({
      list: this.props.list
    })
  }

  // 清除
  removeall=()=>{
    this.props.list.length=0
    this.setState({
      list: this.props.list
    })
  }


  render () {
    return (
      <>
        <ul>
          {
            this.props.list.length ? this.props.list.map((item,index) => {
              return <div key={index}>
                <li className='li' >
                  <span>{index+1}</span>
                  <span className='span'>| {item.name}</span>
                  <span className='span2' onClick={()=>this.del(index)}>X</span>
                </li>
                <div className='div2'></div>
              </div>
            }) : <h1>暂无待办事项</h1> //三元表达式判断没有数据时显示 暂无待办事项
          }
        </ul>
        <div className='z2'>
          <div className='q4'>总数：</div>
          <div className='q5'>{this.props.list.length}</div>
          <div className='q6' onClick={this.removeall}>清除</div>
        </div>
      </>
    );
  }
}

export default List;